<?php 

/*	Author: Gustavo Palacios
	Author: Fernando Rodas

	Project: EPS, Ciencias y Sistemas, USAC. 2014-2015	
	*/
	
		?>
<!DOCTYPE html>
<html>
    <?php
	require_once("clases/funciones.php");
	$plantilla = new Funciones;
	echo $plantilla->headerAdmin("Productos CEMA","Gestionamiento de productos","Administrador Sitio","Productos"); 
	?>
	
	<head>
	
	  <!-- jQuery 2.0.2 -->
        <script src="js/jquery.min.js"></script>
		
	<script>
var productId = 0;
var imagenP = "";
 
$(document).ready(function() {

//AJAX DE SUBMIT
$("#productoForm").on('submit',(function(e){
e.preventDefault();
var fd = new FormData(this);
fd.append("tipo", "20");
$.ajax({
url: "clases/Intermedio.php",
type: "POST",
data:  fd,
contentType: false,
cache: false,
processData:false,
beforeSend: function () {
			$('#myModal').modal('hide');
			$("#datos").html('<p align="center"><img src="img/cargando.GIF"/></p>');
           },
success: function(data){
datosProducto();
$("#test").html(data);

$('#nombre').val("");
$('#precio').val("");
$('#descripcion').val("");
$('#peso').val("");
$('#imagen').val("");
$('#imgSalida').val("");
imagen = document.getElementById("imgSalida");
padre = imagen.parentNode;
padre.removeChild(imagen);
},
error: function(){} 	        
});

}));


$('#productoFormModif').submit(function(event) {
			event.preventDefault();
			var fd = new FormData(this);
					fd.append("iden", productId);
					fd.append("imagenActual", imagenP);
					fd.append("tipo", "23");
					$.ajax({
					url: "clases/Intermedio.php",
					type: "POST",
					data:  fd,
					contentType: false,
					cache: false,
					processData:false,
					beforeSend: function () {
					$('#modalmodif').modal('hide');
					$("#datos").html('<p align="center"><img src="img/cargando.GIF"/></p>');
					},
					success: function(data){
					$("#test").html(data);
					datosProducto();	
					},
					error: function(){} 	        
					});	
});
				

	});
				

window.onload = datosProducto();
	function datosProducto()
	{
	 $("#datos").html('<p align="center"><img src="img/cargando.GIF"/></p>');
var fd = new FormData();
fd.append("tipo", "21");
	$.ajax({
url: "clases/Intermedio.php",
type: "POST",
data:  fd,
contentType: false,
cache: false,
processData:false,
success: function(data){
$("#datos").html(data);

},
error: function(){} 	        
});
	
	
	}
	
	function eliminarProducto() {
					var fd = new FormData();
					fd.append("iden", productId);
					fd.append("imagen", imagenP);
					fd.append("tipo", "22");
					$.ajax({
					url: "clases/Intermedio.php",
					type: "POST",
					data:  fd,
					contentType: false,
					cache: false,
					processData:false,
					beforeSend: function () {
					$('#borrarProducto').modal('hide');
					$("#datos").html('<p align="center"><img src="img/cargando.GIF"/></p>');
					},
					success: function(data){
					$("#test").html(data);
					
					datosProducto();	
					},
					error: function(){} 	        
					});	
				}
					
	
	
	
	</script>
	
	</head>

                <!-- Main content -->
                <section class="content">
					<div id="test">
					
					</div>
					
					
					<!--Comienzo de la tabal -->
					<div class="row">
                        <div class="col-xs-12">
						
						<div class="box">
                                <div class="box-header">
                                    <h3 class="box-title">Lista de Productos</h3>                                    
                                </div><!-- /.box-header -->
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">Agregar nuevo Producto</button>
                             
                                <div class="box-body table-responsive">
									
									<div id="datos">
                                        <p align="center"><img src="img/cargando.GIF"/></p>
                                        
                                    </div>
									
                                </div><!-- /.box-body -->
                            </div><!-- /.box -->
				 
						</div>
                    </div>
					<!--Fin tabla -->
				

                </section><!-- /.content -->
            </aside><!-- /.right-side -->
        </div><!-- ./wrapper -->

		
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Nuevo Producto</h4>
      </div>
      <div class="modal-body">
        
			<!------------------ FORMULARIO DE PRODUCTOS ------------->
		
			<form id="productoForm" action="clases/Intermedio.php" method="post">
				<div class="form-group">
                    <div class="form-group">
						<b>Nombre</b>
						<input type="text" maxlength="41" class="form-control" id="nombre" name="nombre">
					</div>
					
					<div class="form-group">
						<b>Precio<b>
						<div class="input-group">	
							<span class="input-group-addon"><i class="fa fa-usd"></i></span>
							<input type="text" maxlength="41" class="form-control" id="precio" name="precio" >
						</div>
					</div>
					
					<div class="form-group">
                        <label>Descripcion</label>
                        <textarea class="form-control" rows="3" maxlength="140" placeholder="Descripcion del producto ..." id="descripcion" name="descripcion"></textarea>
                    </div>
					
					<div class="form-group">
						<b>Peso</b>
						<input type="text" class="form-control" maxlength="41" id="peso" name="peso" >
					</div>						
					
					<div class="form-group">
						<b>Imagen<b>
						<p class="help-block">Seleccione una imagen para el producto.</p>
							
							<input type="file" id="imagen" name="imagen">
						
						<output id="salida" name="salida"></output>
					</div>
					
				</div>	
			<!----------------------- FORMULARIO DE PRODUCTOS --------------------->	
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        <button type="submit" class="btn btn-primary" name="agregarProducto">Guardar</button>
      </div>
		</form>
    </div>
  </div>
</div>


<!------------------------------------ MODAL PARA ELIMINAR PRODUCTO  ----------------------------------------->
					<div class="modal fade" id="borrarProducto" tabindex="-1" role="dialog" aria-labelledby="borrarProductoLabel" aria-hidden="true">
						<div class="modal-dialog">
						<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
					<h4 class="modal-title" id="myModalLabel">Eliminar</h4>
				</div>
				<div class="modal-body">
				
				<h3><i class="fa fa-warning text-yellow"></i> Esta Seguro de Borrar el Producto? </h3>
				
				</div>
				
				<div class="modal-footer">
					<button class="btn btn-primary" onclick="eliminarProducto()">Aceptar</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
				</div>
				</div>
				</div>
			</div>'

<!------------------------------------FINAL MODAL PARA ELIMINAR PRODUCTO  ----------------------------------------->

<!------------------------------------ MODAL PARA MODIFICAR PRODUCTO  ----------------------------------------->
					<div class="modal fade" id="modalmodif" tabindex="-1" role="dialog" aria-labelledby="modalmodifLabel" aria-hidden="true">
						<div class="modal-dialog">
						<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
					<h4 class="modal-title" id="modalmodifLabel">Modificar Producto</h4>
				</div>
				<div class="modal-body">
				<form id="productoFormModif" method="post">
				<b>Nombre</b>
						<input type="text" class="form-control" maxlength="41" id="nombreModif" name="nombreModif" value="" >&nbsp;
						
				<b>Precio<b>
						<input type="text" class="form-control" maxlength="41" id="precioModif" name="precioModif" value="" >&nbsp;
						
				<label>Descripcion</label>
                        <textarea class="form-control" rows="3" maxlength="140" id="descripcionModif" name="descripcionModif" value=""></textarea>&nbsp;
						
				<b>Peso</b>
						<input type="text" class="form-control" maxlength="41" id="pesoModif" name="pesoModif" value="">&nbsp;
						
				<b>Imagen<b>
						<output id="salidaModif" name="salidaModif"><img id="imgSalidaModif" width="150" height="150" src=""/> </output>
						<p class="help-block">Selecione una imagen si desea cambiarla.</p>
							<input type="file" id="imagenModif" name="imagenModif">
						
				</div>
	
				<div class="modal-footer">
					<button class="btn btn-primary reserve-button">Guardar Cambios</button>
					<button type="submit" class="btn btn-default" data-dismiss="modal">Cancelar</button>
				</div>
				</form>
				</div>
				</div>
			</div>

<!------------------------------------FINAL MODAL PARA MODIFICAR PRODUCTO  ----------------------------------------->

<!------------------------------------INICIO DE MODAL DE LOADING---------------------------------------------------->

<div class="modal fade" id="modalCargando" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                      <img src="img/ajax-loaderCema.gif" width="100%" height="100%" />
                    </div>
                </div>
            </div>




<!------------------------------------INICIO DE MODAL DE LOADING---------------------------------------------------->

<!------------------------------------INICIO DE DIV CARGANDO---------------------------------------------------->
	<div id="progressbar"></div>

<!------------------------------------FIN DE DIV CARGANDO--------------------------------------------------------->

        <!-- jQuery 2.0.2 -->
        <script src="js/jquery.min.js"></script>
        <!-- Bootstrap -->
        <script src="js/plugins/bootstrap.min.js" type="text/javascript"></script>
        <!-- AdminLTE App -->
        <script src="js/plugins/AdminLTE/app.js" type="text/javascript"></script>
  <!-- DATA TABES SCRIPT -->
        <script src="js/plugins/datatables/jquery.dataTables.js" type="text/javascript"></script>
        <script src="js/plugins/datatables/dataTables.bootstrap.js" type="text/javascript"></script>
		<script type="text/javascript">
            $(function() {
                $("#tabla_producto").dataTable();
               
            });
			
			
			function archivo(evt) {
				var files = evt.target.files; // FileList object
       
				//Obtenemos la imagen del campo "file". 
				for (var i = 0, f; f = files[i]; i++) {         
				//Solo admitimos imágenes.
					if (!f.type.match('image.*')) {
						continue;
					}
       
					var reader = new FileReader();
           
					reader.onload = (function(theFile) {
						return function(e) {
						// Creamos la imagen.
							document.getElementById("salida").innerHTML = ['<img id="imgSalida" width="150" height="150" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
						};
					})(f);
 
					reader.readAsDataURL(f);
				}		
			}
             
      document.getElementById('imagen').addEventListener('change', archivo, false);
	  
	  function enviarId(producto, imgEliminar){
			window.productId = producto;
			window.imagenP = imgEliminar;
	  }
	  
/////////

		function modalModificaId(nom,pre,descri,pes,idp,ima) {
			
			document.getElementById('nombreModif').value=nom;
			document.getElementById('precioModif').value=pre;
			document.getElementById('descripcionModif').value=descri;
			document.getElementById('pesoModif').value=pes;
			document.getElementById("imgSalidaModif").src=ima;
			window.productId = idp;
			window.imagenP = ima;

		}
	
	
	function archivo2(evt) {
				var files = evt.target.files; // FileList object
       
				//Obtenemos la imagen del campo "file". 
				for (var i = 0, f; f = files[i]; i++) {         
				//Solo admitimos imágenes.
					if (!f.type.match('image.*')) {
						continue;
					}
       
					var reader = new FileReader();
           
					reader.onload = (function(theFile) {
						return function(e) {
						// Creamos la imagen.
							document.getElementById("imgSalidaModif").src=e.target.result;
						};
					})(f);
 
					reader.readAsDataURL(f);
				}		
			}
             
      document.getElementById('imagenModif').addEventListener('change', archivo2, false);
	

        </script>
    </body>
	<?php
	echo $plantilla->footerAdmin();
	?>
</html>